<template>
    <div>
<h1>Vue基础语法-----响应式数据</h1>
<p>响应式数据：数据变了，视图自动更新</p>
<h1><p>{{ num}}</p>
<p>{{ str}}</p>
<p>{{ p}}</p></h1>

<input type="button" value="变变变" @click="changeNum">
<input type="button" value="变变变" @click="changestr">
<input type="button" value="变变变" @click="changep">

    </div>
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue';

//通过ref包裹起来的数据就是响应式数据
let num=ref(3000);
let str=ref("不上了");
let p=reactive({
    name:"张三",
    age:20,
    friends:["oo","11","学不会"]
})
//函数
const changeNum=()=>{
    num.value++;  
}

const changestr=()=>{   
    if (str.value=="不上了") {
        str.value="好好学习";  
    } else {
        str.value="不上了";  
    } 
        
}

const changep=()=>{
    if (p.age==88) {
        p.name="张三",
        p.age=28
    } else {
        p.age=88,
    p.name="学不会"
    }
    
}

</script>

<style scoped>

</style>